<?php
\backend\assets\HighMapsAsset::register($this);
?>
<?php $this->beginBlock('content') ?>
<div class="row">
    <div class="col-sm-12">
        <div class="white-box">
            <h3 class="box-title"></h3>
            <div class="row m-b-15">
                <div class="col-sm-12 mb-5">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="input-daterange input-group">
                                    <input type="text" class="form-control" name="start" value="<?=Yii::$app->request->get('start') ?>" autocomplete="off" placeholder="" />
                                    <span class="input-group-addon bg-info b-0 text-white">to</span>
                                    <input type="text" class="form-control" name="end" value="<?=Yii::$app->request->get('end') ?>" autocomplete="off" placeholder="" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <button class="btn btn-info" type="submit">
                                    搜索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-sm-12">
                    <div id="chart" style="width:100%;min-height:600px;border:1px solid grey;border-radius:5px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $this->endBlock()?>
<?php $this->beginBlock("script")?>
<script>
    <?php
        $cityMap = $provinceMap = [];
        foreach ($plugsRunTotalCityList as $item) {
            $cityMap[$item['city']] = $item['terminal_num_sum'];
        }
        foreach ($plugsRunTotalProvinceList as $item) {
            $provinceMap[$item['province']] = $item['terminal_num_sum'];
        }
    ?>

    var cityMap = <?=json_encode($cityMap)?>;
    var provinceMap = <?=json_encode($provinceMap)?>;

    Highcharts.setOptions({
        lang: {
            drillUpText: '< 返回 “{series.name}”'
        }
    });

    var map = null, geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
    $.getJSON(geochina + 'china.json&callback=?', function(mapdata) {
        var data = [];
        // 随机数据
        Highcharts.each(mapdata.features, function(md, index) {
            var tmp = {
                name: md.properties.name,
                value: provinceMap[md.properties.name] ? provinceMap[md.properties.name] : 0
            };
            if(md.properties.drilldown) {
                tmp.drilldown = md.properties.drilldown;
            }
            data.push(tmp);
        });
        map = new Highcharts.Map('chart', {
            chart: {
                events: {
                    drilldown: function(e) {
                        // 设置最底层未二级行政区
                        if (e.point.drilldown && e.point.drilldown.indexOf('/') !== -1) return false;

                        // 异步下钻
                        this.tooltip.hide();
                        if (e.point.drilldown) {
                            var pointName = e.point.properties.fullname;
                            map.showLoading('下钻中，请稍后...');
                            // 获取二级行政地区数据并更新图表
                            $.getJSON(geochina +   e.point.drilldown + '.json&callback=?', function(data) {
                                data = Highcharts.geojson(data);
                                Highcharts.each(data, function(d) {
                                    if(d.properties.drilldown) {
                                        d.drilldown = d.properties.drilldown;
                                    }
                                    d.value = cityMap[d.properties.name] ? cityMap[d.properties.name] : 0;
                                });
                                map.hideLoading();
                                map.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                });
                                map.setTitle({
                                    text: pointName
                                });
                            });
                        }
                    },
                    drillup: function() {
                        map.setTitle({
                            text: '中国'
                        });
                    }
                }
            },
            title: {
                text: '中国'
            },
            subtitle: {
                useHTML: true,
                text: '业务运行详情'
            },
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },
            tooltip: {
                useHTML: true,
                headerFormat: '<table><tr><td>{point.name}</td></tr>',
                pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
                    '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
                    '<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
                    '<tr><td>终端数</td><td><strong style="color:red;">{point.value}</strong></td></tr>' ,
                footerFormat: '</table>'
            },
            colorAxis: {
                min: 0,
                minColor: '#fff',
                maxColor: '#006cee',
                labels:{
                    style:{
                        "color":"red",
                        "fontWeight":"bold"
                    }
                }
            },
            series: [{
                data: data,
                mapData: mapdata,
                joinBy: 'name',
                name: '中国',
                states: {
                    hover: {
                        color: '#a4edba'
                    }
                }
            }]
        });
    });

</script>
<?php $this->endBlock(); ?>
